<template>
  <div class="HSChart" :id="id"></div>
</template>

<script>
export default {
  name: "housingSecurityChart",
  props: ["id"],
  mounted() {
    this.drawChart();
  },
  methods: {
    drawChart() {
      const { id } = this;
      let chart = this.$echarts.init(document.getElementById(id));
      let option = {
        color: ["#c23531", "#2BB7FF", "#FCB33A", "#60BFB9"],
        legend: {
          data: [
            "南湖",
            "秀洲",
            "经开",
            {
              name: "完成比",
              icon: "line"
            }
          ],
          top: 30,
          textStyle: {
            color: "#BED7FA",
            fontSize: 14
          },
          icon: "roundRect"
        },
        grid: {
          left: "0",
          right: "0",
          bottom: "0",
          containLabel: true
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          axisLine: {
            lineStyle: {
              color: "#BED7FA"
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#BED7FA",
              type: "dashed",
              opacity: 0.25
            }
          },
          data: ["七月", "六月", "五月", "四月", "三月", "二月", "一月"]
        },
        yAxis: [
          {
            type: "value",
            name: "单位(套)",
            min: 0,
            max: 100,
            interval: 20,
            axisLine: {
              lineStyle: {
                color: "#BED7FA"
              }
            },
            axisLabel: {
              formatter: "{value} K"
            },
            splitLine: {
              lineStyle: {
                color: "#BED7FA",
                type: "dashed",
                opacity: 0.25
              }
            }
          },
          {
            type: "value",
            axisLine: {
              lineStyle: {
                color: "#BED7FA "
              }
            },
            splitLine: {
              lineStyle: {
                color: "#BED7FA",
                type: "dashed",
                opacity: 0.25
              }
            },
            name: "完成比",
            min: 0,
            max: 100,
            interval: 20,
            axisLabel: {
              formatter: "{value} %"
            }
          }
        ],
        series: [
          {
            name: "完成比",
            type: "line",
            smooth: true,
            data: [20, 60, 65, 15, 17, 36, 59]
          },
          {
            name: "南湖",
            type: "line",
            step: "start",
            data: [12, 13, 10, 13, 9, 23, 21],
            areaStyle: {
              // color: '#0000CD',
              opacity: 0.5
            },
            symbol: "none"
          },
          {
            name: "秀洲",
            type: "line",
            step: "middle",
            data: [22, 28, 20, 23, 29, 43, 41],
            areaStyle: {
              opacity: 0.5
            },
            symbol: "none"
          },
          {
            name: "经开",
            type: "line",
            step: "end",
            data: [45, 43, 40, 45, 59, 53, 51],
            areaStyle: {
              opacity: 0.5
            },
            symbol: "none"
          }
        ]
      };
      chart.setOption(option, true);
      window.addEventListener("resize", function() {
        chart.resize();
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.HSChart {
  width: 45.37rem;
  height: 34rem;
  // width: 100%;
  // height:100%;
}
</style>